<style lang="less" scoped>
@c-primary: #3399ff;
.panel {
  margin-bottom: 10px;
  &-title {
    display: flex;
    padding: 10px;
    border-bottom: 0.1px solid #eaeaea;
    background: white;
    &.first {
      margin-bottom: 20px;
    }

    &__label {
      flex: 1;
      font-size: 16px;
      align-items: center;
      &.name {
        font-size: 22px;
      }
    }
    &__right {
      font-size: 18px;
    }
    &__status {
      border: 1px solid @c-primary;
      border-radius: 4px;
      padding: 2px 6px;
      color: @c-primary;
      font-size: 12px;
    }
  }
  &-content {
    margin-bottom: 10px;
    background: white;

    &__item {
      display: flex;
      padding: 10px 10px 0 10px;
      font-size: 14px;
      &-label {
        color: #666;
      }
      &-value {
        flex: 1;
        padding-left: 15px;
        color: #333;
      }
    }
  }
}
.status {
  font-size: 12px;
  color: #f55;
  border-radius: 2px;
  border: 0.1px solid #f55;
  padding: 0 4px;
}
</style>

<template>
  <section>
    <template v-for="(item, index) in items" wx:key="unique">
      <div class="panel" :key="index">
        <!-- title -->
        <div class="panel-title">
          <div class="panel-title__label">{{item.Type||'-'}}</div>
          <div class="panel-title__right">
            <div class="status">列入</div>
          </div>
        </div>
        <!-- content -->
        <div class="panel-content">
          <div class="panel-content__item">
            <div class="panel-content__item-label">列入原因</div>
            <div class="panel-content__item-value">{{item.AddReason||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">列入日期</div>
            <div class="panel-content__item-value">{{item.AddDate||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
          <div class="panel-content__item">
            <div class="panel-content__item-label">作出决定机构</div>
            <div class="panel-content__item-value">{{item.AddOffice||'-'}}</div>
            <div class="panel-content__item-right"></div>
          </div>
        </div>
      </div>
    </template>

    <!-- search on loading -->
    <load v-if="loading" />

    <!-- 无数据 -->
    <div class="info" v-else-if="items.length===0">无更多数据</div>
  </section>
</template>
<script>
import Load from '@/components/load';

export default {
  components: {
    Load
  },
  data() {
    return {
      isLoading: false,
      items: []
    };
  },
  onLoad() {
    // 初始化数据
    this.getInfos();
  },
  onUnload() {
    // 卸载清空数据
    this.items = [];
  },
  methods: {
    async getInfos() {
      // 获取法人关联企业
      const url = '/xcx/getSVListByReason';
      let unique = '';
      try {
        unique = this.$root.$mp.page.options.Unique;
      } catch (error) {}

      const params = {
        unique
      };
      const res = await this.$http.get(url, params);

      if (res.status != 200) {
        wx.showToast({
          title: res.message || '获取失败！',
          icon: 'none',
          mask: true
        });
        return;
      }
      this.items = res.result;
    }
  }
};
</script>
